// var
@drag-prefix-cls          : x-drag;
@drag-border-circle-size  : 10px;
@drag-border-circle-bg    : #fff;
@drag-border-corner-size  : 15px;

// mixins

// styles
.@{drag-prefix-cls} {
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  position: relative;
  &-item {
    position: absolute;
    z-index: 1;
    pointer-events: all;
    cursor: pointer;
    &__content {
      font-size: inherit;
    }
    &__controls {
      .absolute-fullscreen;
      border: 2px dashed @default-color;
      &_circle {
        position: absolute;
        width: @drag-border-circle-size;
        height: @drag-border-circle-size;
        border: 1px solid @default-color;
        border-radius: 50%;
        background-color: @drag-border-circle-bg;
        &&_lt {left: 0; top: 0;transform: translate(-50%, -50%);}
        &&_lb {left: 0; bottom: 0;transform: translate(-50%, 50%);}
        &&_rt {right: 0; top: 0;transform: translate(50%, -50%);}
        &&_rb {right: 0; bottom: 0;transform: translate(50%, 50%);}
        &&_resize,
        &&_rotate {
          width: auto;
          height: auto;
          padding: @drag-border-circle-size * 0.25;
          .xvu-iconfont {
            float: left;
            width: @drag-border-circle-size * 1.2;
            height: @drag-border-circle-size * 1.2;
            font-size: @drag-border-circle-size * 1.2;
            line-height: 1;
            text-align: center;
          }
        }
        &&_resize {cursor: nw-resize;}
        &&_rotate {cursor: default;}
      }
      &_corner {
        position: absolute;
        width: @drag-border-corner-size;
        height: @drag-border-corner-size;
        color: #898989;
        &&_rt {right: 0; top: 0;}
        &&_rb {right: 0; bottom: 0;}
        &&_resize,
        &&_rotate {
          .xvu-iconfont {
            font-size: @drag-border-corner-size * 1.2;
            line-height: 1;
          }
        }
        &&_resize {cursor: nw-resize;}
        &&_rotate {cursor: default;}
      }
    }
  }
}
